
<template>
  <div >
  <br>
   <Row>
         <Col span="24" offset="1">
        <Input v-model="tablename" placeholder="请输入你要查询的表名" style="width: 300px" />
        <Button type="info" @click="handleClick">开始查询</Button>
        <br>
        <br>
        </Col>
   </Row>
  <Row>      
        <Col span="24" offset="1">
          <div id="myNetwork"> </div>
        </Col>       
  </Row>
  <Row>
        <Col span="22" offset="1">
          <vnodeform :data="selected" :buttons="buttonnamelist" @getmoreref="updateGraph"></vnodeform>
        </Col>
  </Row>
  </div>
</template>
<style scoped>
#myNetwork {
  float: left;
  width: 1300px;
  height: 400px;
  border: 1px solid grey;
}
</style>

<script>
import vnodeform from "./nodeform.vue";

var DataSet = require("vis/lib/DataSet");
var Network = require("vis/lib/Network/Network");
export default {
  components: {
    vnodeform
  },
  // props: {
  //   tablename: {
  //     type: String,
  //     default: ""
  //   }
  // },
  data: function() {
    return {
      tablename: '',
      data: { nodes: [], edges: [] },
      selected: {}, //被选中的数据对象属性
      buttonnamelist: [
        //用于下钻结点时，用于点击的按钮名称
      ]
    };
  },
  methods: {
    handleClick() {
      // 先清空当前图
      this.data.nodes=[];
      this.data.edges=[];
      this.updateGraph({
        flag: "t",
        tablenames: this.tablename
      });
      console.log('新的表'+this.tablename)
    },
    updateGraph(params) {
      // console.log(params);
      // 与当前返回的信息进行组合,再根据数据进行绘图
      this.$http.post("http://127.0.0.1:5000/operation/search", params).then(
        response => {
          if(response.body.nodes.length===0){
            alert("找不到相关的表,请重新输入");
          };
          //将post请求获取的结果与当前的data数据进行合并，分别在 nodes 和 edges进行合并
          this.data.nodes = this.data.nodes.concat(response.body.nodes || []);
          this.data.edges = this.data.edges.concat(response.body.edges || []);
          //更新当前网络图
          this.drawGraph("myNetwork");
        },
        response => {
          alert("error");
        }
      );
    },
    drawGraph(id) {
      // id 是元素的ID名称 此函数专门用于绘图
      var newnodes = [];
      var newedges = [];
      //原始返回的数据不一定能够直接在图上展示出来，这里需要做一清洗和转换
      this.data.nodes.forEach(element => {
        var transform = node => {
          // 精洗与转换主体函数
          // 1.为结点添加组信息
          var group = node.label;
          //清洗与转换函数,根据不同结点样式更新形状和颜色信息
          if (node.label === "jobs") {
            return {
              id: node.id,
              label: node.properties.job_name.toLowerCase(),
              color: { background: "red" },
              group: group,
              shape: "diamond"
            };
          } else if (node.label === "dbtables") {
            //
            return {
              id: node.id,
              label: node.properties.tablename.toLowerCase(),
              color: { background: "yellow" },
              group: group
            };
          } else if (node.label == "datastores") {
            //
            return {
              id: node.id,
              label: node.properties.name.toLowerCase(),
              shape: "database",
              group: group
            };
          } else if (node.label == "pipes") {
            //
            return {
              id: node.id,
              label: node.properties.name.toLowerCase(),
              group: group
            };
          }
        };
        var newnode = transform(element);
        // 结点去重方法
        function isexistnode(item) {
          return item.id === newnode.id;
        }

        // 开始去重
        if (newnodes.filter(isexistnode).length === 0) {
          newnodes.push(newnode);
        }
      });
      this.data.edges.forEach(edge => {
        var newedge = edge;
        newedge.arrows = "to";

        // 根据设置连线的颜色箭头等
        if (edge.label === "update") {
          newedge.color = { color: "red" };
        } else if (edge.label === "before") {
          newedge.color = { color: "brown" };
        } else if (edge.label === "belong_to") {
          newedge.color = { color: "purple" };
        }
        function isexistedge(item) {
          return (item.from === edge.from) & (item.to === edge.to);
        }

        // 开始边去重
        if (newedges.filter(isexistedge).length === 0) {
          newedges.push(edge);
        }
      });
      //开始准备画图

      var container = document.getElementById(id);
      // var x = container.clientWidth / 2 + 50;
      // var y = container.clientHeight / 2 + 50;
      // var step = 70;
      // newnodes.push({
      //   id: 1000001,
      //   x: x,
      //   y: y,
      //   label: "jobs",
      //   group: "jobs",
      //   fixed: true,
      //   physics: false
      // });
      var nodes = new DataSet(newnodes);
      var edges = new DataSet(newedges);
      var networkdata = {
        nodes: nodes,
        edges: edges
      };
      // 样式选项
      var options = {
        layout: {
          randomSeed: 2,
          hierarchical: {
            direction: "UD" //从左到右排列
          }
        },
        // 分组格式
        groups: {
          jobs: {
            color: { background: "red", border: "white" },
            shape: "diamond"
          },
          dbtables: {
            shape: "box",
            color: "cyan"
          },
          datastores: { shape: "database", color: "rgb(0,255,140)" },
          pipes: {
            shape: "dot",
            icon: {
              face: "FontAwesome",
              code: "\uf0c0",
              size: 30,
              color: "orange"
            }
          }
        }
      };
      var network = new Network(container, networkdata, options);

      var that = this;
      // 根据一个结点ID返回结点属性值
      network.on("click", function(params) {
        params.event = "[original event]";
        // 根据点中的结点ID找到对应结点的类型
        var buttontype = that.data.nodes.filter(item => {
          return item.id === params.nodes[0];
        })[0].label;
        // 根据类型获取了组件中需要展示的铵钮列表类型和按钮名称
        if (buttontype === "pipes") {
          that.buttonnamelist = [
            {
              type: "dbtable",
              name: "展示该管道关联表结点"
            },
            {
              type: "pipe",
              name: "展示该管道前后的管道"
            },
            {
              type: "job",
              name: "展示该管道所属的作业"
            }
          ];
        } else if (buttontype === "dbtables") {
          that.buttonnamelist = [
            {
              type: "datastore",
              name: "展示该表所属的数据源"
            },
            {
              type: "pipe",
              name: "查询该表关联的其它管道"
            }
          ];
        } else {
          // TODO 此处需要补充其它分支
          that.buttonnamelist = [];
        }
        console.log(
          that.data.nodes.filter(item => {
            return item.id === params.nodes[0];
          })[0].properties.name
        );
        that.selected = that.data.nodes.filter(item => {
          return item.id === params.nodes[0];
        })[0];
      });
    }
  },
  mounted() {
    // 首次加载时，需要根据用户选择的表名进行图表加载TODO
  }
};
</script>